<template>
  <div class="wallet-module">
    <div class="module-header">
      <h3 class="module-title">我的钱包</h3>
      <div class="view-all" @click="navigateTo('/wallet')">
        进入 <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="wallet-grid">
      <div class="wallet-item">
        <div class="amount">
          <span class="amount-value">18.6</span>
          <span class="badge">1</span>
        </div>
        <div class="unit">万</div>
        <div class="label">借钱</div>
      </div>

      <div class="wallet-item">
        <div class="amount">
          <span class="amount-value">35</span>
        </div>
        <div class="unit">元最高</div>
        <div class="label">零钱</div>
      </div>

      <div class="wallet-item">
        <div class="amount">
          <span class="amount-value">420</span>
          <span class="dot"></span>
        </div>
        <div class="unit">元</div>
        <div class="label">外卖红包</div>
      </div>

      <div class="wallet-item">
        <div class="amount">
          <span class="amount-value">1.05</span>
        </div>
        <div class="unit">元</div>
        <div class="label">笔笔返现</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateTo = (path) => {
  router.push(path);
};
</script>

<style scoped>
.wallet-module {
  background-color: white;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.view-all {
  font-size: 12px;
  color: #999;
  cursor: pointer;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.wallet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.amount {
  position: relative;
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.amount-value {
  font-weight: bold;
}

.unit {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.label {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -12px;
  background-color: #ff5252;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 0 4px;
}

.dot {
  position: absolute;
  top: -2px;
  right: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff5252;
}
</style> 